.my-userinfo-container{
	.top-box{	
		height:400rpx;
		display: flex;
		justify-content:center;
		align-items: center;
		flex-direction: column;
		position: relative;
		z-index:2;
		.top-bg{
			width: 100%;
			position:absolute;
			top:0;
			z-index:1;
		}
		.userinfo{
			position: absolute;
			bottom:-170rpx;
			width:95%;
			height:310rpx;
			background-color:#fff;
			border-radius: 15rpx;
			margin-top:250rpx;
			box-shadow: 0 1px 5px #a5a5a5;
			z-index: 10;
			.avatar{
				position: absolute;
				top: -60rpx;
				left:30rpx;
				width:180rpx;
				height:180rpx;
				border:1px solid #fff;
				border-radius: 50%;
				box-shadow:  0 1px 5px #666;
			}
			.nickname_vip{
				position: absolute;
				top:15rpx;
				left:235rpx;
				width:60%;
				.nickname{
					font-weight: bold;
					color:#333;
					font-size:35rpx;
				}
				.vip-box{
					height: 50rpx;
					display: flex;
					justify-content: left;
					align-items: center;
					.vip{
						width:35rpx;
					}
					.lv{
						width: 65rpx;
						height:28rpx;
						text-align: center;
						border-radius: 10rpx;
						font-size:20rpx;
						color:#eaca87;
						border: 1px solid #eaca87;
						margin-left:10rpx;
					}
				}
				.vip-box_2{
					height: 50rpx;
					display: flex;
					justify-content: left;
					align-items: center;
					.vip{
						width:35rpx;
					}
					.lv{
						width: 65rpx;
						height:28rpx;
						text-align: center;
						border-radius: 10rpx;
						font-size:20rpx;
						color:#cacaca;
						border: 1px solid #cacaca;
						margin-left:10rpx;
					}
				}
		    }
	        .sign{
				position: absolute;
				right: 0;
				top: 68rpx;
				background:linear-gradient(to right,#f0d02c 5%,#fcab21);
				height:60rpx;
				width:220rpx;
				z-index:10;
				border-radius: 30rpx 0 0 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size:26rpx;
				color:#fff;
				.signtext{
					margin: 0 10rpx 0 5rpx;
				}
			}
			.number{
				position: absolute;
				bottom: 0;
				height:150rpx;
				width: 100%;
				display: flex;
				justify-content:center;
				align-items: center;
				
				.column-line{
					width: 1px;
					height:50rpx;
					background-color:#ebebeb;
				}
				.option{
					width: 220rpx;
					height: 140rpx;
					text-align: center;
					.int{
						font-size:55rpx;
						font-weight: bold;
						margin-bottom: 5rpx;
						color:#343434;
					}
					.number-text{
						color: #666;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	.nav{
		height: 390rpx;
		background-color:#fff;
		position: relative;
		z-index:1px;
		.vipimage{
			width: 95%;
			height:186rpx;
			position: absolute;
			bottom:10rpx;
			left:2.5%;
			z-index: 5;
			border-radius: 15rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			.online{
				color:#fff;
				position: absolute;
				z-index: 7;
				font-size:45rpx;
				left: 20rpx;
				top: 40rpx;				
			}
			.btn{
				background:linear-gradient(to right,#dbb293,#f8dec4);
				position:absolute;
				z-index:8;
				width: 220rpx;
				height:50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size:30rpx;
				left:85rpx;
				top:110rpx;
				border-radius: 25rpx;
				color:#78482f;
				
			}
			.vip-image{
				width: 100%;
				position:absolute;
				left: 0px;
				top: 0px;
				z-index: 6;
			}
		}
	}
	.option-list{
		background-color:#fff;
		margin-top:20rpx;
		width:95%;
		margin:20rpx auto;
		border-radius: 15rpx;
		.list-item{
			height:100rpx;
			display: flex;
			justify-content: flex-start;
			align-items:center;
			padding:0 20rpx;
			.icon{
				margin-right:10rpx;
			}
			.list-item-text{
				font-size:30rpx;
				margin-right:10rpx;
			}
			.right{
				margin-left:auto;
			}
		}
	}
}